<template>
  <!-- 选项卡   -->
  <ul class="tabs">
    <li v-for="item in config.tab" :key="item.id" @click="handlerClick(item.id)"
        :style="item.id === action ? actionLiStyle : liStyle" :class="{'action':item.id === action}">{{ item.name }}
    </li>
  </ul>
</template>

<script>
import {ref,computed} from 'vue'

export default {
  name: 'Tabs',
  props: {
    config: {
      type: Object
    },
    editor: {
      type: Object
    },
    id: {
      type: String
    }
  },
  setup(props) {
    let action;
    if (props.config.tab.length) {
      action = ref(props.config.tab[0].id)
    } else {
      action = ref("")
    }
    // 点击选中
    const handlerClick = (value)=>{
      action.value = value
      if (props.active.length > 0) {
        // eslint-disable-next-line no-unused-expressions
        // this.$PubSub.publish('interactive', {
        //   active: this.tabsConfig.onlineJson.active,
        //   value: value,
        //   key: this.tabsConfig.onlineJson.param
        // })
      }
    }

    const liStyle = computed(() => {
      return {
        width: 100 / props.config.tab.length + '%',
        height: '100%',
        margin: `0 ${props.config.spacing}px`,
        'font-size': `${props.config.fontSize}px`,
        'color': props.config.fontColor,
        'background': `${props.config.bgColor} url('${props.config.bgImg}')  no-repeat center`,
        'border': `${props.config.border.width}px solid ${props.config.border.color}`,
        'line-height': `${props.editor.height - (props.config.border.width * 2)}px`,
        'text-align': 'center'
      }
    })
    const actionLiStyle = computed(()=> {
      return {
        width: 100 / props.config.tab.length + '%',
        height: '100%',
        margin: `0 ${props.config.spacing}px`,
        'font-size': `${props.config.fontSize}px`,
        'color': props.config.action.fontColor,
        'background': `${props.config.action.bgColor} url('${props.config.action.bgImg}')  no-repeat center`,
        'border': `${props.config.border.width}px solid ${props.config.action.borderColor}`,
        'line-height': `${props.editor.height - (props.config.border.width * 2)}px`,
        'text-align': 'center'
      }
    })
    return {
      action,
      liStyle,
      actionLiStyle,
      handlerClick
    }
  }
}
</script>

<style scoped>
.tabs {
  width: 100%;
  height: 100%;
  display: flex;
}

.tabs > li {
  cursor: pointer;
  background-size: 100% 100% !important;
}
</style>

